<template>
  <div class="page-dialog">
    <!-- 新增弹窗 -->
    <el-dialog :visible.sync="detailVisible" :title="title" width="40%" class="add-dialog" @close="onClose">
      <el-form ref="form" :model="form" label-width="110px">
         <el-form-item label="项目名称：">
          <span>{{info.xmmc}}</span>
        </el-form-item>
        <el-form-item label="事项名称：">
          <span>{{info.xmmc1}}</span>
        </el-form-item>
        <el-form-item label="办理意见：" class="flex">
          <div class="handle-wrap">
            <el-input class="ui-input" v-model="form.name" size="small" placeholder="请输入" clearable></el-input>
            <div>
              <el-button size="small" class="margin-lt" type="primary" plain>存为常用语</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button size="small" @click="onClose">取 消</el-button>
        <el-button size="small" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: "handleDialog",
  props: {
    title: {
      required: true,
      type: String,
      default: '提示'
    },
    detailVisible: {
      type: Boolean,
      default: false
    },
    proInfo: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data() {
    return {
      info: this.proInfo,
      form: {
        name: '',
        type: [],
        resource: '',
        desc: ''
      },
    };
  },
  watch: {
    proInfo(val) {
      this.info = val;
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
  },
  methods: {
    onClose() {
      this.$emit('close', false);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.page-dialog {
  .add-dialog {
    .handle-wrap {
      width: 100%;
      display: flex;
      .margin-lt {
        margin-left: 12px;
      }
    }
  }
}

/deep/ .add-dialog .el-dialog .el-dialog__header {
  background: #f4f6f8!important;
}
/deep/ .add-dialog .el-dialog .flex .el-form-item__content {
  display: flex;
}
// /deep/ .add-dialog .el-dialog .flex .el-form-item__content button {
//   margin-left: 12px;
// }
/deep/ .add-dialog .el-checkbox {
  display: block;
}
/deep/ .add-dialog .el-dialog__title {
  font-weight: bold;
}
/deep/ .add-dialog .el-dialog__header {
  padding: 18px;
}
/deep/ .add-dialog .el-dialog__close {
  font-size: 18px!important;
}
/deep/ .add-dialog .el-form-item__label {
  color: #86878c;
}
/deep/ .handle-wrap>._lt>.el-tree>.el-tree-node>.el-tree-node__content>.el-tree-node__expand-icon {
  font-size: 18px;
  color: #4e5157;
}
</style>